import { Button, Input, message, Space, Table, Tooltip } from 'antd';
import React from 'react';
import { connect } from 'umi';

import moment from 'moment';
import { PlusOutlined } from '@ant-design/icons';

const { Search } = Input;
const currControl = 'Coupon';
class ViewPage extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      dataSource: [],
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      keywords: '',
      payload: {},
      selectedRowKeys: [],
      selectedRowVal: [],
    };
  }
  componentDidMount() {
    this.fetchDatas();
  }
  fetchDatas = () => {
    this.setState({ loading: true });
    const { pageIndex, pageSize, payload } = this.state;
    this.props
      .dispatch({
        type: 'Abp/getAll',
        payload: { SkipCount: (pageIndex - 1) * pageSize, MaxResultCount: pageSize, ...payload },
        control: currControl,
      })
      .then(() => {
        var resp = this.props.response;
        if (resp) {
          var dataSource = resp.result?.items;
          this.setState({ loading: false, dataSource, totalCount: resp.result?.totalCount });
        }
      });
  };

  onSelectChange = (selectedRowKeys: any, selectedRowVal: any) => {
    this.setState({ selectedRowKeys, selectedRowVal });
    console.log(selectedRowVal);
  };
  onSearch = (value: any) => {
    var payload = this.state.payload;
    payload.keywords = value;
    this.setState({ payload }, () => {
      this.fetchDatas();
    });
  };
  handleAdd = () => {
    let { selectedRowKeys } = this.state;
    let { memberId } = this.props;
    let memid = memberId.join(',');
    let couid = selectedRowKeys.join(',');
    if (selectedRowKeys.length <= 0) {
      message.warning('请至少选择一项优惠券！');
      return;
    }
    this.props
      .dispatch({
        type: 'Abp/batchCreate',
        payload: {
          couid,
          memid,
        },
      })
      .then(() => {
        var resp = this.props.response;
        if (resp.success) {
          message.success('成功发放优惠券！');
        } else {
          message.error('发放失败，请重试！');
        }
      });
    console.log(selectedRowKeys);

    console.log(this.props.memberId);
  };
  render() {
    const { loading, dataSource, selectedRowKeys, totalCount, pageSize } = this.state;
    const columns = [
      {
        title: '优惠券名称',
        dataIndex: 'title',
      },
      {
        title: '优惠券类型',
        dataIndex: 'type',
      },
      {
        title: '开始时间',
        dataIndex: 'startTime',
        render: (text: Date) => (
          <span>{text == null ? '' : moment(text).format('YYYY-MM-DD HH:MM:SS')}</span>
        ),
      },
      {
        title: '有效截止时间',
        dataIndex: 'endTime',
        render: (text: Date) => (
          <span>{text == null ? '' : moment(text).format('YYYY-MM-DD HH:MM:SS')}</span>
        ),
      },
    ];
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <>
        <Space>
          <Tooltip title="确定发放优惠券">
            <Button type="primary" icon={<PlusOutlined />} onClick={this.handleAdd}>
              确定
            </Button>
          </Tooltip>
          <Search
            style={{ width: 240 }}
            placeholder="输入关键词搜索"
            onSearch={(value) => this.onSearch(value)}
          />
        </Space>
        <Table
          rowKey="id"
          loading={loading}
          rowSelection={rowSelection}
          columns={columns}
          dataSource={dataSource}
          pagination={{
            onChange: (page) => {
              this.setState({ pageIndex: page }, () => {
                this.fetchDatas();
              });
            },
            pageSize,
            total: totalCount,
          }}
        />
      </>
    );
  }
}
export default connect(({ Abp }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
}))(ViewPage);
